<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .drag {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
      .drop {
        width: 200px;
        height: 200px;
        background-color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div
      draggable="true"
      class="drag"
      ondragstart="dragstart(event)"
      ondragend="dragend(event)"
      ondrag="drag(event)"
    ></div>
    <div class="drop"></div>
    <script>
      function dragstart(e) {
        console.log('ondragstart');
        console.log(e);
      }

      function dragend(e) {
        console.log('dragend');
        console.log(e);
      }

      function drag(e) {
        console.log('drag');
        console.log(e);
      }
      /* 
      1 dragSource: 拖动源对象。
        必须设置draggable=true属性才可以被拖拽。
        拖拽源的几个事件
        1 dragstart-mousedown
          拖动开始，触发一次（可以保存拖拽对象的一些数据）
        2 dragend-mouseup
          拖动结束触发，触发一次（释放拖拽对象的数据或者是重置样式）
        3 drag-mousemove
          拖动期间被触发，触发多次（设置拖拽对象的样式）
      2 dropTarget: 放置的目标对象 
        放置对象的几个方法
        1 dragenter
          进入放置对象触发一次
        2 dragleave
          离开放置对象触发一次
        3 dragover
          拖拽元素在放置对象上触发多次100ms/1次
        4 drop
          拖拽元素在放置目标上释放时触发一次
    */
    </script>
  </body>
</html>
